<template>
  <div class="login-page">
    <div class="page-header">
      <div class="back-btn">
        <var-icon color="white" name="chevron-left" @click="backPage" />
      </div>
      <div class="title">注册</div>
    </div>
    <!-- <div class="user-head">
      <span class="img-box">
        <img src="@/assets/logo.png" alt />
      </span>
    </div>-->
    <var-form ref="form" :disabled="disabled" :readonly="readonly" scroll-to-error="start">
      <var-space direction="column" :size="[14, 0]">
        <var-input placeholder="昵称（可用中文）" v-model="formData.userName" />
        <var-input
          placeholder="用户id（字母 数字 下划线）"
          :rules="[v => !!v || '用户id不能为空']"
          v-model="formData.userId"
        />
        <var-input
          type="password"
          placeholder="密码（字母 数字或下划线）"
          :rules="[v => !!v || '密码不能为空']"
          v-model="formData.passWord"
        />
        <var-checkbox
          v-model="formData.agree"
          :icon-size="16"
          style="font-size:14px"
        >我已阅读并同意《用户使用协议》和《隐私相关协议》</var-checkbox>
      </var-space>
      <var-button :loading="state.loading" block type="success" @click="onClick">注册</var-button>
    </var-form>

    <div style="padding:10px 0px">
      <span style="font-size:12px"></span>
    </div>
  </div>
</template>
<script>
import { login, register } from "@/api/user";
import { reactive, ref } from "vue";
import { useStore } from "vuex";
import { getUrlParams } from "@/util/getUrlParam";
import { router } from "@/router";
import { Dialog } from "@varlet/ui";
export default {
  name: "RegisterView",
  setup() {
    const form = ref(null);
    const formData = reactive({
      userId: "",
      passWord: "",
      userName: "",
      agree: false
    });
    const store = useStore();
    const state = reactive({
      loading: false,
      value: false
    });

    // 点击后注册
    const onClick = async () => {
      const res = await form.value.validate();
      if (res) {
        state.loading = true;
        register({
          url: "/users-api/register",
          params: { ...formData },
          success: data => {
            console.log("注册成功", data);
            Dialog({
              title: "注册成功",
              message: "是否立即登录",
              onConfirm: () => {
                router.push({
                  name: "login",
                  query: {
                    userId: formData.userId
                  }
                });
              }
            });
          },
          error: error => {},
          complete: () => {
            // history.back(-1);
            debugger;
            state.loading = false;
          }
        });
      }
    };
    return {
      form,
      formData,
      state,
      onClick,
      backPage: () => {
        window.history.back();
      }
    };
  }
};
</script>
<style lang="scss" scoped>
.login-page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 20px;
  .page-header {
    width: 100%;
    height: 50px;
    display: flex;
    .back-btn {
      width: 20px;
      height: 20px;
      background-color: #6063e9;
      border-radius: 50%;
    }
    .title {
      flex: 1;
      text-align: center;
    }
  }

  .user-head {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    .img-box {
      display: inline-block;
      width: 100px;
      height: 100px;
      border-radius: 5px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .login-btn {
    width: 100%;
    .btn-item {
      width: 100%;
      padding: 10px 0;
      .btn-container {
        display: flex;
        background-color: #6063e9;
        line-height: 40px;
        border-radius: 50px 50px 50px 50px;

        .icon {
        }
        .text {
        }
      }
    }
  }
}
</style>